<template>
  <section class="mt-36">
    <div class="text-2def text-center text-[#626262]"> Cases of Plastic Injection Molding </div>
    <div class="mt-8">
      <swiper-container
          :slides-per-view="5"
          :slides-per-group="5"
          :grid="{
          rows: 2,
          fill: 'row'
        }"
          :loop="true"
          :autoplay="{
          delay: 7000,
        }"
          :pagination="pagination"
          class="w-339.5"
      >
        <swiper-slide v-for="(image, index) in imagePaths" :key="index">
          <figure class="w-62.5">
            <img :src="image.path" :alt="image.name" />
          </figure>
        </swiper-slide>
      </swiper-container>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'

const images = import.meta.glob('/src/images/services/injection-molding/Injection-Molding-*.webp', { eager: true });

const imagePaths = Object.entries(images).map(([key, value]) => ({
  path: value.default || value, // 对应导入的图片路径
  name: key.split('/').pop(),  // 提取文件名
}));


const pagination = ref({
  clickable: true,
  renderBullet: function (index, className) {
    return `<span class="${className}"></span>`
  }
})

</script>

<style scoped>
swiper-container {
  --swiper-pagination-bottom: 0;
  --swiper-pagination-bullet-width: 6px;
  --swiper-pagination-bullet-height: 6px;
  --swiper-pagination-bullet-horizontal-gap: 6px;
  --swiper-pagination-color: #000000;
}
</style>
